<template>
  <div class="project-approval">
    <!-- 搜索条件 -->
    <el-card class="search-card">
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="项目名称">
          <el-input v-model="searchForm.projectName" placeholder="请输入项目名称"></el-input>
        </el-form-item>
        <el-form-item label="申请人">
          <el-input v-model="searchForm.applicationCode" placeholder="请输入申请人"></el-input>
        </el-form-item>
        <el-form-item label="审批状态">
          <el-select v-model="searchForm.approvalStatus" placeholder="请选择状态">
            <el-option label="全部" value=""></el-option>
            <el-option label="待审批" value="0"></el-option>
            <el-option label="已通过" value="1"></el-option>
            <el-option label="已驳回" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 项目列表 -->
    <el-card class="table-card">
      <el-table
        :data="projectList"
        border
        style="width: 100%"
      >
        <el-table-column prop="projectApplicationCode" label="申请编号" width="180"></el-table-column>
        <el-table-column prop="projectName" label="项目名称" width="180"></el-table-column>
        <el-table-column prop="applicationCode" label="申请人code"></el-table-column>
        <el-table-column prop="applicationName" label="申请人"></el-table-column>
        <el-table-column prop="customerId" label="客户code"></el-table-column>
        <el-table-column prop="customerName" label="客户名称"></el-table-column>
        <el-table-column prop="createTime" label="申请日期" width="180">
          <template slot-scope="scope">
            {{ formatDate(scope.row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="approvalStatus" label="状态" width="100">
          <template slot-scope="scope">
            <el-tag :type="getStatusType(scope.row.approvalStatus)">
              {{ getStatusText(scope.row.approvalStatus) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150" fixed="right">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="handleDetail(scope.row)"
            >查看详情</el-button>
            <el-button
              v-if="scope.row.approvalStatus === 0"
              type="text"
              size="small"
              @click="handleApproval(scope.row)"
            >审批</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </el-card>

    <!-- 审批对话框 -->
    <el-dialog
      title="项目审批"
      :visible.sync="approvalDialogVisible"
      width="50%">
      <el-form :model="approvalForm" label-width="100px">
        <el-form-item label="审批结果">
          <el-radio-group v-model="approvalForm.approvalResult">
            <el-radio :label="1">通过</el-radio>
            <el-radio :label="2">驳回</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审批意见">
          <el-input
            type="textarea"
            v-model="approvalForm.approval_comments"
            :rows="4"
            placeholder="请输入审批意见">
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="approvalDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitApproval">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 详情对话框 -->
    <el-dialog
      title="项目详情"
      :visible.sync="detailDialogVisible"
      width="70%">
      <div v-if="detailDialogVisible" class="project-detail">
        <!-- 申请信息 -->
        <el-card class="detail-card">
          <div slot="header">
            <span>申请信息</span>
          </div>
          <el-descriptions :column="3" border>
            <el-descriptions-item label="申请编号">{{ currentProject.projectApplicationCode }}</el-descriptions-item>
            <el-descriptions-item label="申请人">{{ currentProject.applicationName }}</el-descriptions-item>
            <el-descriptions-item label="申请日期">{{ formatDate(currentProject.createTime) }}</el-descriptions-item>
          </el-descriptions>
        </el-card>

        <!-- 客户信息 -->
        <el-card class="detail-card">
          <div slot="header">
            <span>客户信息</span>
          </div>
          <el-descriptions :column="3" border>
            <el-descriptions-item label="客户名称">{{ currentProject.customerName }}</el-descriptions-item>
            <el-descriptions-item label="客户代码">{{ currentProject.customerId }}</el-descriptions-item>
          </el-descriptions>
        </el-card>

        <!-- 项目信息 -->
        <el-card class="detail-card">
          <div slot="header">
            <span>项目信息</span>
          </div>
          <el-descriptions :column="3" border>
            <el-descriptions-item label="项目名称">{{ currentProject.projectName }}</el-descriptions-item>
            <el-descriptions-item label="项目类型">
              {{ currentProject.projectType === '1' ? '一次研发' : '二次研发' }}
            </el-descriptions-item>
            <el-descriptions-item label="预计成本">{{ currentProject.projectedCost }}元</el-descriptions-item>
            <el-descriptions-item label="预计售价">{{ currentProject.sellPrice }}元</el-descriptions-item>
            <el-descriptions-item label="预计盈利">{{ currentProject.projectedProfit }}元</el-descriptions-item>
            <el-descriptions-item label="产品名称">{{ currentProject.productName }}</el-descriptions-item>
            <el-descriptions-item label="目标客户群体" :span="3">{{ currentProject.targetCustomer }}</el-descriptions-item>
            <el-descriptions-item label="目标市场" :span="3">{{ currentProject.targetMarket }}</el-descriptions-item>
            <el-descriptions-item label="产品物料" :span="3">{{ currentProject.productMaterial }}</el-descriptions-item>
            <el-descriptions-item label="产品描述" :span="3">{{ currentProject.productDescription }}</el-descriptions-item>
          </el-descriptions>
        </el-card>

        <!-- 审批信息 -->
        <el-card class="detail-card" v-if="currentProject.approvalStatus !== '0'">
          <div slot="header">
            <span>审批信息</span>
          </div>
          <el-descriptions :column="3" border>
            <el-descriptions-item label="审批状态">
              <el-tag :type="getStatusType(currentProject.approvalStatus)">
                {{ getStatusText(currentProject.approvalStatus) }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="审批人">{{ currentProject.approvalPerson || '-' }}</el-descriptions-item>
            <el-descriptions-item label="审批时间">{{ formatDate(currentProject.approvalTime) || '-' }}</el-descriptions-item>
            <el-descriptions-item label="审批意见" :span="3">{{ currentProject.approvalComment || '-' }}</el-descriptions-item>
          </el-descriptions>
        </el-card>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'ProjectApproval',
  data() {
    return {
      // 搜索表单
      searchForm: {
        status: 1
      },
      // 项目列表
      projectList: [],
      // 分页参数
      pageNum: 1,
      pageSize: 10,
      total: 0,
      // 审批对话框
      approvalDialogVisible: false,
      approvalForm: {
        result: 1,
        comment: ''
      },
      // 详情对话框
      detailDialogVisible: false,
      currentProject: null
    }
  },
  created() {
    this.getProjectList()
  },
  methods: {
    // 获取项目列表
    getProjectList() {
      const params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        param: this.searchForm
      }
      console.log(params)
      // 调用接口获取数据
      this.$axios.post('api/project-server/approval/queryProjectList', params )
        .then(resp => {
          if (resp.data.code === 200) {
            this.projectList = resp.data.data.list
            this.total = resp.data.data.total
          }
        })
    },
    // 搜索
    handleSearch() {
      this.pageNum = 1
      this.getProjectList()
    },
    // 重置搜索
    resetSearch() {
      this.searchForm = {
        projectName: '',
        applicant: '',
        status: ''
      }
      this.handleSearch()
    },
    // 查看详情
    handleDetail(row) {
      this.currentProject = row
      this.detailDialogVisible = true
    },
    // 审批操作
    handleApproval(row) {
      this.currentProject = row
      this.approvalDialogVisible = true
      this.approvalForm = {
        result: 1,
        comment: ''
      }
    },
    // 提交审批
    submitApproval() {
      const params = {
        projectApplicationCode: this.currentProject.projectApplicationCode,
        ...this.approvalForm
      }
      this.$axios.post('api/project-server/approval/approveProject', params)
        .then(resp => {
          if (resp.data.code === 200) {
            this.$message.success('审批成功')
            this.approvalDialogVisible = false
            this.getProjectList()
          }
        })
    },
    // 格式化日期
    formatDate(date) {
      if (!date) return ''
      return new Date(date).toLocaleDateString()
    },
    // 获取状态类型
    getStatusType(status) {
      const types = {
        '0': 'warning',
        '1': 'success',
        '2': 'danger'
      }
      return types[status] || 'info'
    },
    // 获取状态文本
    getStatusText(status) {
      const texts = {
        '0': '待审批',
        '1': '已通过',
        '2': '已驳回'
      }
      return texts[status] || '未知'
    },
    // 分页方法
    handleSizeChange(val) {
      this.pageSize = val
      this.getProjectList()
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.getProjectList()
    }
  }
}
</script>

<style scoped>
.project-approval {
  padding: 20px;
}

.search-card {
  margin-bottom: 20px;
}

.search-form {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.table-card {
  margin-bottom: 20px;
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
}
</style>
